import React, { useEffect, useState } from 'react'
import { Button, Modal, Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
interface Props {
    BatchCardFlag: boolean
    setBatchCardFlag: (event: boolean) => void
    ReturnText: any
}
const BatchCardReturns: React.FC<Props> = ({ ReturnText, BatchCardFlag, setBatchCardFlag }) => {

    const intl = useIntl()
    const handleOk = () => {
        setBatchCardFlag(false);
    };

    const handleCancel = () => {
        setBatchCardFlag(false);
    };



    return (
        <div>
            <Modal title={intl.formatMessage({id:"business.Batch card returns"})} footer={null} open={BatchCardFlag} onOk={handleOk} onCancel={handleCancel}>
                <div style={{ textAlign: "center", height: "29vh", backgroundColor: "#f2f2f2", margin: 20, lineHeight: "24vh", fontSize: 20, fontWeight: "bold", color: "#1890ff" }}>

                    <div>
                        {ReturnText.code == 0 ?intl.formatMessage({id:"business.Please put room card on the card dispenser."})  :
                            ReturnText.code == 1 ?
                                <div style={{ display: "flex", justifyContent: "center", alignItems: "center", lineHeight: "5vh", paddingTop: 50 }}>
                                    <div style={{marginTop:40}}>
                                        <Spin indicator={<LoadingOutlined style={{ fontSize: 22, }} spin />} />
                                    </div>
                                    <div style={{  fontSize: 23, marginTop: 0.3 }}>
                                        <span style={{fontSize:19   }}> {intl.formatMessage({id:"business.Occupants"})} : {ReturnText.data.realName}</span><br />
                                        <span>&nbsp;{ReturnText.data.roomName + intl.formatMessage({id:"business.Start the card withdrawal."})}</span>
                                    </div>


                                </div>
                                :
                                ReturnText.code == 2
                                    ? <span style={{ color: "green", fontSize: 23, }}>{intl.formatMessage({id:"business.Card canceled successfully"})}</span>
                                    : intl.formatMessage({id:"business.Empty card"})}
                    </div>

                </div>
            </Modal>
        </div>
    )
}

export default BatchCardReturns
